<script setup lang='ts'>

import { getUserSimplifyMessage } from './../../api/common'
import { getData } from './../../api/area'
import type { Areas } from "../../api/types/common";
import { UserFilled } from '@element-plus/icons-vue'
import { onMounted, reactive, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import Itemdetails from './item-details.vue'
import { IlistParams } from "../../api/types/common";



onMounted(() => {

  getusermessage()
  loadList(listParams)

  //  loadList("wsn")

}) 




interface RestaurantItem {
  id: string;
  value: string;
  place: string;
  createdDate: string
  link: {
    herf: string
    method: string
  }

}
const listAreaMessage = ref<Areas[]>([])

const listcount = ref(0)


const restaurants = ref<RestaurantItem[]>([])

const state = ref('')
const usermessage = ref('')


const listParams = reactive({
  keyword: 'w',
  OrderBy:'place',
  Desc: true,
  PageNumber: 1,
  PageSize: 10,

})

interface herdermessage {
  currentPage: number
  nextPageLink: string
  pageSize: number
  previousPageLink: string
  totalCount: number
  totalPages: number
}



// 获取用户的用户名

const getusermessage = async () => {

  const username = await getUserSimplifyMessage()
  usermessage.value = username.data.data.userMessage.userName


}


const querySearch = (queryString: string, cb: any) => {

  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  console.log("result----" + results)
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0

    )
  }

}


watch(state, async () => {
  let datalist = ref<RestaurantItem[]>([])
  // console.log("stateDe值-----" + state.value)
  if (state.value.length != 0) {
    listParams.keyword = state.value
    const getvalue = await getData(listParams)



    datalist.value = getvalue.areas.map((item: { id: any; createdDate: any; name: any; place: any; link: any; }) => {
      return {
        id: item.id,
        createdDate: item.createdDate,
        value: item.name,
        place: item.place,
        link: item.link
      }

    })

  }
  restaurants.value = datalist.value



})

const handleSelect = (item: RestaurantItem) => {
  console.log("item---------" + item)
}




const loadList = async (listParams: IlistParams) => {

  const data = await getData(listParams)

  const headermess: herdermessage = JSON.parse(data.headers['x-pagination'])

  listcount.value = headermess.totalCount


  listAreaMessage.value = data.areas

}


const findAreas = () => {

  listParams.keyword = state.value
  loadList(listParams)
}



// 分页
// 改变页码的方法
const handleCurrentChange = (page: number) => {
  listParams.PageNumber = page
  loadList(listParams)
}
//每页大小改变的事件
const handleSizeChange = (size: number) => {
  listParams.PageSize = size
  listParams.PageNumber = 1
  loadList(listParams)
}

// namechange
const NameChange=(value:string)=>{

listParams.OrderBy=value
console.log(listParams.OrderBy)
findAreas ()
}


// DescChange

const DescChange=(value:boolean)=>
{

  listParams.Desc=value
    console.log(listParams.Desc)
    findAreas ()

}

</script>

<template>

  <div class="all">
    <header>
      <!-- header有两部分，一部分放头像，另一部分放搜索框 -->
      <div>
        <el-dropdown style=" border: none;">
          <span class="el-dropdown-link">
            {{ usermessage }}

          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>账号设置</el-dropdown-item>
              <el-dropdown-item>切换账号</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div class="demo-type">
          <el-avatar :icon="UserFilled" />
        </div>
      </div>


      <!-- 搜索框部分 -->
      <div class="serch">
        <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
          class="inline-input w-50" placeholder="Please Input" @select="handleSelect" style="width:40%;
                border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
            " />

        <div class="right-items" style="float:right">
          <el-button type="primary" :icon="Search" @click="findAreas">Search</el-button>
        </div>
      </div>
    </header>

    <main>
      <article class="left">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <div>
                <!-- 排序方式 -->
                <el-dropdown>
                  <span class="el-dropdown-link">
                    排序方式
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                  <template #dropdown>

                    <el-radio-group v-model="listParams.OrderBy"
                                @change="NameChange"
                    >

                      <el-dropdown-menu>
                        <el-dropdown-item>
                          <el-radio label="name">区域名字</el-radio>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-radio label="place">区域地点</el-radio>
                        </el-dropdown-item>
                          <el-dropdown-item>
                          <el-radio label="Number">区域人数</el-radio>
                        </el-dropdown-item>

                      </el-dropdown-menu>

                    </el-radio-group>


                  </template>
                </el-dropdown>
              <!-- 是否倒叙 -->
                <el-dropdown>
                  <span class="el-dropdown-link">
                排列顺序
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-radio-group v-model="listParams.Desc"
                 @change="DescChange"
                    >

                      <el-dropdown-menu>

                        <el-dropdown-item>
                          <el-radio label="false">正序</el-radio>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-radio label="true">倒序</el-radio>
                        </el-dropdown-item>

                      </el-dropdown-menu>

                    </el-radio-group>
                  </template>
                </el-dropdown>
              </div>
              <el-button class="button" text
              @click="findAreas"
              >Operation button
             

              </el-button>
            </div>
          </template>

          <div>
            <Itemdetails :list="listAreaMessage" />
          </div>




          <!-- {{ 'List item ' + o }} -->

          <el-pagination :page-sizes="[4, 5, 6]" :small=false background
            layout="total, sizes, prev, pager, next, jumper" :total="listcount" style="margin-top:25px"
            v-model:currentPage="listParams.PageNumber" v-model:page-size="listParams.PageSize"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-card>
      </article>
      <article class="right">
       待开发模块
      </article>
    </main>

  </div>

</template>


<style lang='scss' scoped>
.all {
  background: #f3f5f6;
}

header div:nth-of-type(1) {
  display: flex;
  justify-content: end;
  align-items: center;
  //  background: wheat;
  padding: 5px;
  background: #FFFFFF;
  border-bottom: 1px solid #F3F5F6;


}

.demo-type {
  margin-right: 20px;
}

.serch {
  // background: #000;
  color: white;
  display: flex;
  justify-content: center;

  padding-bottom: 15px;

  padding-top: 15px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgb(28 31 33 / 6%);
}

.el-dropdown {
  margin-right: 20px;

  span {
    font-size: 20px;
    color: #5e5e5e;
    font: 14px/2em Microsoft YaHei, SimSun, Arial;


  }
}


:deep(.el-input__inner) {
  height: 47px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.el-button {

  height: 47px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}



// 主要部分
main {
  // background:#333;
  display: flex;
  // flex-direction: column;
  max-width: 1200px;
  // justify-content: center;
  margin: 0 auto;



}

.left {
  width: 800px;
  // background: rgb(244, 117, 117);
}

.right {
  flex: 1;
  // background:pink ;
}


// zuomian


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  padding-top: 16px;
  padding-bottom: 16px;
  box-sizing: border-box;

  border-bottom: 1px solid rgba(43, 51, 59, .1);
  line-height: 1;
}

.mt-4 {
  justify-content: center;
}
</style>